<template>
  <div id="app">
    <transition :name="animation">
      <router-view :class="tabBarVisible ? 'router-view padding-tab' : 'router-view'" />
    </transition>
    <Tabbar v-show="tabBarVisible"></Tabbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Tabbar from '@/components/tabbar';
export default {
  components: {
    Tabbar
  },
  data() {
    return {
      animation: 'fade'
    };
  },
  computed: {
    ...mapGetters(['tabList']),
    tabBarVisible() {
      let index = this.tabList.findIndex(item => {
        return item.path == this.$route.path;
      });
      return index != -1 ? true : false;
    }
  },
  mounted() {
    // 解决ios分享必须用a跳转问题
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      this.$store.commit('setShareUrl', location.href);
    }
  },
  watch: {
    $route(to, from) {
      const tabList = this.tabList;
      const toIndex = tabList.findIndex(item => {
        return item.path === to.path;
      });
      const fromIndex = tabList.findIndex(item => {
        return item.path === from.path;
      });
      if (toIndex !== -1 && fromIndex !== -1) {
        this.animation = 'none';
      } else {
        const fromDate = from.query.time || 0;
        const toDate = to.query.time || 0;
        this.animation = fromDate < toDate ? 'slide-left' : 'slide-right';
      }
    }
  }
};
</script>
<style lang="scss">
#app {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.router-view {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  &.padding-tab {
    padding-bottom: 100px;
  }
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}

.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>
